<template>
    <div id="app" class="with-bar index" :class="{'page-loading':page.loading|| initLoading}">
        <ui-loading v-if="initLoading" class="page-init-loading">
            <div slot="content"></div>
        </ui-loading>
        <scroll-fixed>
            <div class="ui-header" :class="{'search-hide':hideSearch}">
                <a v-show="!hideSearch" href="javascript:;" @click="appDownload" class="app-download" :class="{'hide':hideDownload}">
                    <div class="app-logo">
                        <img src="../assets/app_logo.png"> 泛亚资讯
                    </div>
                    <span>打开</span>
                </a>
                <div class="header-search" ref="search">
                    <a href="/" class="logo">
                        <img src="../assets/logo.png" alt="">
                    </a>
                    <a @click="go('search')" class="search">
                        <i class="uicon uicon-search"></i>
                        <!-- <input type="text" placeholder="搜索新闻"> -->
                        <span>搜索新闻</span>
                    </a>
                    <!-- <div class="loc">
                        <span>{{countryName}}</span>
                        <i class="uicon uicon-gps" @click="headChangeArea"></i>
                    </div> -->
                </div>
                <!-- end header-search -->
                <div class="tabs">
                    <div class="tabs-wrap">
                        <ui-tabs ref="tabs" :list="channel.my" :active="page.channel_id" @choose="changeTab" @init="initTabs" />
                    </div>
                    <a href="javascript:;" @click="channel.status = true" class="add-on">
                        <i class="uicon uicon-add"></i>
                    </a>
                </div>
            </div>
        </scroll-fixed>
        <ui-loading v-if="page.loading" />
        <page-error v-else-if="pageError" @refresh="pageRefresh"></page-error>
        <scroll-list ref="scroll" v-else class="ui-list" :class="{'no-data':page.is_end && news.list.length == 0}" :config="scroll"
            @pull="pullLoad" @bottom="loadmore">
            <div class="area-bar" v-if="this.page.country_short_name!== ''">
                <div class="wrap">
                    <a href="javascript:void(0);" @click="changeAreaChange" class="item">
                        <i class="uicon uicon-gps"></i><span>更多区域</span>
                    </a>
                    <div class="item">
                        <img :src="page.area.weather_icon"><span>{{page.area.weather_desc}}</span>
                    </div>
                </div>
            </div>
            <ui-rank :rank=rank v-if="Object.keys(rank).length!=0">
                
            </ui-rank>
            <page-error v-if="page.is_end && news.list.length == 0 && JSON.stringify(rank) === '[]'">
                <div slot="logo">
                    <img src="../assets/page-empty.png" class="logo">
                </div>
                <div slot="text">
                    <p class="text">暂无内容</p>
                </div>
            </page-error>
            
            <template v-else>
                <transition-group class="index-list" name="list" tag="div">
                    <ui-item v-for="(item,index) in news.list" :item="item" :key="item.type + '_' +item.id" :params="player" @playVideo="playVideo"
                        @volumechange="volumeChange" @close="removeItem(...arguments,index)"></ui-item>
                </transition-group>
            </template>
            
        </scroll-list>

        <offline :withbar="true" />
        <ui-tab-bar :active="page.tabBarActive" @change="tabChange"></ui-tab-bar>
        <popup-area :status="area.status" :active="page.area" :list="channel" @done="areaDone" @close="area.status = false"></popup-area>
        <popup-channel ref="channel" v-if="channel.status" :config="channel" @done="channelChange" />

        <ui-popup :status="alert.status" @close="alert.status = false">
            <div class="ui-alert">
                <div class="alert-content">
                    <p>切换地区</p>
                    <span>检测到你在{{alert.name}},是否切换到该地区?</span>
                </div>
                <div class="alert-footer">
                    <a href="javascript:;" @click="cancel">取消</a>
                    <a href="javascript:;" @click="confirm">确定</a>
                </div>
            </div>
        </ui-popup>
        <!--
         <ui-popup :status="wcData.popup.status" @close="wcData.popup.status = false" >
            <div class="popup-common model-popup">
                <p class="title">请选择直播方式</p>
                <div class="model-box">
                    <a :href="wcData.popup.cntv" v-show="wcData.popup.cntv" class="model-item" >
                        <p>视频直播（CNTV）</p>
                    </a>
                    <a :href="wcData.popup.tx" class="model-item">
                        <p>图文直播（腾讯看比赛）</p>
                    </a>
                </div>
                <a href="javascript:;" class="close-btn" @click="wcData.popup.status = false"></a>
            </div>
        </ui-popup>
        -->
        <popup-unlike ref="unlike"></popup-unlike>
        <slide-tool ref="slide" />
    </div>
</template>
<script>
    import Items from "../components/items.vue";
    import ScrollList from "../components/scrollList.vue";
    import Area from "../components/area.vue";
    import scrollFixed from "../components/scrollFixed.vue";
    import offline from "../components/offline.vue";
    import UILoading from "../components/loading.vue";
    import pageError from "../components/pageError.vue";
    import UIPopup from "../components/popup.vue";
    import UIRank from "../components/rank.vue";

    import mxNavTab from "../mixins/navtab.js";
    import mxTabBar from "../mixins/tabbar.js";
    import mxPlayer from "../mixins/inlinePlayer.js";
    import mxSlide from "../mixins/slide.js";
    import mxunlike from "../mixins/unlikebox.js";

    export default {
        name: "index",
        data() {
            return {
                isApp: this.$utils.app.isApp,
                hideDownload: false,
                hideSearch: false,
                initLoading: true,
                rank: {},
                page: {
                    tabBarActive: 0,
                    cache_channel_type: "news_channel",
                    is_end: false, //是否已经没有数据
                    page_no: 1,
                    channel_id: 0,
                    country_short_name: "",
                    loading: true,
                    area: {},
                    gps: ""
                },
                pageError: false,

                scroll: {
                    pull: false,
                    bottom: false
                },

                area: {
                    status: false
                },
                news: {
                    list: []
                },
                wcData: {
                    list: [],
                    CNTVLiveUrls: {},
                    popup: {
                        status: false,
                        cntv: '',
                        tx: '',
                    },
                },
                isheadChange: false,
                pullType: 'down',
            };
        },
        computed: {
            liveLink() {
                let link = '';
                for (let i = 0, len = this.wcData.list.length; i < len; i++) {
                    let item = this.wcData.list[i];
                    if (item.matchPeriod == 1) {
                        link = this.wcData.CNTVLiveUrls[item.mid] || '';
                        break;
                    }
                }
                return link;
            },
            olverItem() {
                let olverItem = '';
                for (let i = 0, len = this.wcData.list.length; i < len; i++) {
                    let item = this.wcData.list[i];
                    if (item.matchPeriod == 1) {
                        olverItem = item;
                        break;
                    }
                }
                return olverItem;
            }
        },
        mixins: [mxNavTab, mxTabBar, mxPlayer, mxSlide, mxunlike],
        components: {
            [Items.name]: Items,
            [Area.name]: Area,
            [scrollFixed.name]: scrollFixed,
            [offline.name]: offline,
            [ScrollList.name]: ScrollList,
            [UILoading.name]: UILoading,
            [pageError.name]: pageError,
            [UIPopup.name]: UIPopup,
            [UIRank.name]:UIRank,
        },
        mounted() {
            // this.getGPS();
            this.$on("GPS_DONE", name => {
                this.changeNameInArea(name);
            });

            this.$on("RELOADDATA", type => {
                this.$emit("PLYAER_CLOSE");
                this.page.page_no = 1;
                this.page.loading = true;
                this.page.is_end = false;
                this.scroll.bottom = false;

                this.loadPageData(true).then(rs => {
                    this.$nextTick(() => {
                        this.scroll.bottom = this.news.list.length <= 3 ? 'hidden' : false;
                    })
                }).catch(e => {
                    this.pageError = true;
                }).finally(() => {
                    this.$nextTick(() => {
                        this.page.loading = false;
                        this.initLoading = false;
                    })
                });
            });

            let searchHeight = this.$refs.search.getBoundingClientRect().height;
            this.$on('SCROLL', (e, params) => {
                if (params.top > searchHeight) {
                    this.hideSearch = params.flag;
                } else {
                    this.hideSearch = false;
                }
            });

            !this.isApp && this.$on('SCROLL', (e, params) => {
                this.hideDownload = params.top >= params.height * 0.6;
            })

            //获取直播的地址
            // this.getCNTVLiveUrls();
        },
        methods: {
            getCNTVLiveUrls() {
                let src = 'https://mat1.gtimg.com/pingjs/ext2020/test2017/cntv.js';
                let script = document.createElement('script');
                script.src = src;
                document.body.appendChild(script);
                script.onload = () => {
                    this.wcData.CNTVLiveUrls = CNTVLiveUrls;
                }
            },
            showLive(item) {
                let kbs = "http://sports.qq.com/kbsweb/kbsshare/game.htm?mid=" + item.mid + "?sportsrefer=2018.xw.qq.com";
                if (item.matchPeriod != 1) {
                    location.href = kbs
                } else {
                    this.wcData.popup.cntv = this.wcData.CNTVLiveUrls[item.mid] || '';
                    this.wcData.popup.tx = kbs;
                    this.wcData.popup.status = true;
                }
            },
            oshowLive(item) {
                if (item != "") {
                    let kbs = "http://sports.qq.com/kbsweb/kbsshare/game.htm?mid=" + item.mid + "?sportsrefer=2018.xw.qq.com";
                    if (item.matchPeriod != 1) {
                        location.href = kbs
                    } else {
                        this.wcData.popup.cntv = this.wcData.CNTVLiveUrls[item.mid] || '';
                        this.wcData.popup.tx = kbs;
                        this.wcData.popup.status = true;
                    }

                } else {
                    this.$toast("暂无直播")
                    return false;
                }
            },
            appDownload() {
                location.href = this.$utils.app.link.open_detail;
                setTimeout(()=>{
                    if (this.$utils.app.ios) {
                        location.href = this.$utils.app.download.ios
                    } else {
                        location.href = this.$utils.app.download.android
                    }
                },2000);
                
            },
            getWcList() {
                let matchType = {
                    "-1": "非法状态",
                    0: "未开始",
                    1: "进程中",
                    2: "已结束",
                    3: "比赛前延期",
                    4: "比赛中延期",
                    5: "取消"
                }
                window.__jp0 = (data) => {
                    let nowTime = + new Date;
                    let nowMoment = this.$moment(nowTime);
                    let nowKey = nowMoment.format('YYYY-MM-DD');
                    let prevMoment = this.$moment(nowTime - 24 * 60 * 60 * 1000);
                    let prevKey = prevMoment.format('YYYY-MM-DD');
                    let countMoment, countKey;
                    //如果小于当天的凌晨六点，计算起点为上一天
                    if (nowMoment.hour() < 6) {
                        countMoment = prevMoment
                        countKey = prevKey
                    } else {
                        countMoment = nowMoment
                        countKey = nowKey
                    }

                    //显示以计算起点起的三天数据
                    let showList = (() => {
                        let keys = [countKey];
                        for (let i = 1; i < 3; i++) {
                            let key = countMoment.add(1, 'days').format('YYYY-MM-DD');
                            keys.push(key);
                        }
                        return keys;
                    })();

                    if (data.code == 0) {
                        let list = [];
                        if (showList && showList.length) {
                            showList.forEach(key => {
                                let keyList = data.data[key];
                                keyList && keyList.length > 0 && keyList.forEach(item => {
                                    item.gameType = matchType[item.matchPeriod];
                                    item.summarry = item.matchDesc + ' ' + this.$moment(item.startTime).format('M月DD日 HH:mm')
                                    item.formatStartDay = item.matchDesc + ' ' + this.$moment(item.startTime).format('M月DD日')
                                    item.formatStartTime = this.$moment(item.startTime).format('HH:mm')
                                    list.push(item);
                                })


                            });

                            this.wcData.list = list;
                        }
                    }
                }
                let src = 'https://matchweb.sports.qq.com/matchUnion/list?startTime=2018-06-14&endTime=2018-07-20&columnId=4&index=0&callback=__jp0';
                let script = document.createElement('script');
                script.src = src;
                document.body.appendChild(script);
            },
            go(key) {
                location.href = this.$config.pages[key];
            },
            changeNameInArea(name) {
                if (this.page.area.name == name) return false;
                let item = this.getAreaByName(name);
                if (item) {
                    this.page.gps = "";
                    this.alert.name = name;
                    this.alert.item = item;
                    this.alert.status = true;
                } else {
                    this.page.gps = name;
                }
            },
            loadPageData(needClean = false, isUnshift = false, loadPageData = false) {
                let url,
                    params = {};

                let pchannel = [],
                    pcounry = [];

                this.channel.my.forEach(item => {
                    if (item.short_name) {
                        pcounry.push(item.short_name);
                    } else {
                        pchannel.push(item.id);
                    }
                });


                if (this.page.channel_id === 0) {
                    params.is_main = 1;
                } else {
                    if (this.page.country_short_name === "") {
                        params.channel = this.page.channel_id;
                        //需要带上地区数组
                        params.filter_countrys = pcounry.join(',');
                    }
                    if (this.page.channel_id === "") {
                        params.country = this.page.country_short_name
                        //需要带上频道数组
                        params.filter_channels = pchannel.join(',');

                    }
                }
                if (loadPageData != "isRefresh") {
                    params.action = 'refresh';
                }

                let country = this.$utils.caches.get('country', 'storage')
                if (country && this.page.channel_id ===0) {
                    params.country = country;
                }

                if (this.page.channel_id === 13 || this.page.channel_id === 0) {
                    this.getWcList();
                }

                url = "?ct=news&ac=get_list";
                params.pull = this.pullType;

                return this.$http.get(url, { params }).then(response => {
                    let { data } = response;
                    if (needClean)
                        (this.news.list = []), (document.body.scrollTop = 0);
                    if (data.code == 0) {
                        this.page.is_end = !data.data.is_have_data;
                        this.rank = data.data.entertainment_rank_list || {};
                        let list = [];
                        data.data.list &&
                            data.data.list.forEach &&
                            data.data.list.forEach(item => {
                                if (this.$utils.unlike.check(item.id)) return;
                                let tmpItem = item;
                                if (item.style_num == 6) {
                                    //热点新闻
                                    tmpItem.url = item.detail_url;
                                    tmpItem.type = "hot-list";
                                    let childList = [];
                                    toString.call(item.list) ==
                                        "[object Array]" &&
                                        item.list.forEach(child => {
                                            if (this.$utils.unlike.check(child.id)) return;
                                            let citem = child;
                                            citem.type =
                                                child.type == 3 ? "专题" : "";
                                            citem.url = child.detail_url;

                                            citem.source = child.source;
                                            citem.view = child.browse_total;
                                            citem.time = this.$moment(child.issue_time * 1000).fromNow().replace(" ", "");
                                            citem.src = child.cover_img[0];
                                            childList.push(citem);
                                        });
                                    tmpItem.list = childList;
                                } else {
                                    tmpItem = item;
                                    tmpItem.url = item.detail_url;
                                    tmpItem.type = (() => {
                                        switch (item.style_num) {
                                            case 1:
                                                return "special";
                                            case 2:
                                                return "normal";
                                            case 3:
                                                return "grid";
                                            case 4:
                                                return "video";
                                            case 5:
                                                return "single";
                                        }
                                    })();
                                    if (tmpItem.type !== "grid") {
                                        tmpItem.src = item.cover_img[0];
                                    } else {
                                        tmpItem.src = item.cover_img;
                                    }

                                    if (tmpItem.type == 'video') {
                                        tmpItem.play_status = 0;
                                    }

                                    tmpItem.view = item.browse_total;
                                    tmpItem.time = this.$moment(
                                        item.issue_time * 1000
                                    )
                                        .fromNow()
                                        .replace(" ", "");
                                    if (item.style_num != 1) {
                                        tmpItem.close = true;
                                    }
                                }
                                list.push(tmpItem);
                                
                            });

                        if (!needClean) {
                            this.$nextTick(() => {
                                //更新吼要把热点事件列表滚动条归零
                                document.querySelectorAll('.hot-list').forEach(domList => {
                                    let dl = domList.querySelector('.list');
                                    dl && (dl.scrollLeft = 0);
                                })
                                // let cs = document.querySelector('.ct-schedule');
                                // cs && (cs.scrollLeft = 0);
                            })
                            if (isUnshift) {
                                let savelist = [];

                                this.news.list.forEach(item => {
                                    if (item.is_hot !== 1 && item.is_top !== 1 && item.style_num !== 6) {
                                        savelist.push(item);
                                    }
                                })
                                this.news.list = list.concat(savelist);
                                return data.data.count
                            } else {
                                let savelist = [];
                                list.forEach(item => {
                                    if (item.is_hot !== 1 && item.is_top !== 1 && item.style_num !== 6) {
                                        savelist.push(item);
                                    }
                                })
                                this.news.list = this.news.list.concat(savelist);
                            }

                        } else {
                            this.news.list = list;
                        }

                        this.page.page_no++;
                        if (params.action == 'refresh') {
                            let pagePosition = this.$utils.caches.get('pagePosition', 'session');
                            setTimeout(() => {
                                scrollTo(0, pagePosition ? pagePosition : 0);
                                this.$utils.caches.set('pagePosition', 0, 'session');
                            }, 10);
                        }

                        return data.data.count
                    } else {
                        this.$toast(data.msg);
                    }
                })
                    .catch(err => {
                        this.$toast(err);
                    });
            },
            pullLoad(cb, isRefresh) {
                //let isRefresh = true;
                this.pullType = 'down';
                this.scroll.bottom = false;
                this.loadPageData(false, true, "isRefresh").then((count) => {
                    this.$nextTick(() => {
                        this.scroll.bottom = this.news.list.length <= 3 ? 'hidden' : false;
                        this.$refs.scroll && this.$refs.scroll.$emit('refresh_done', count)
                        cb && cb()
                    });
                })
            },
            pageRefresh() {
                this.pageError = false;
                this.$emit("RELOADDATA");
            },
            headChangeArea() {
                let areaList = this.$utils.caches.get('area_list', 'storage')
                let oldCountry = JSON.parse(areaList).filter((i) => {
                    return i.short_name == this.country
                })

                this.countryName = oldCountry[0].name

                this.channel.my = oldCountry;
                this.isheadChange = true
                this.area.status = true
            },
            areaDone(item) {
                this.$utils.caches.set(this.htmlName, '', 'session');
                // 点击更多地区
                if (!this.isheadChange && this.page.area) {
                    if (item.short_name !== this.page.area.short_name) {
                        for (let i = 0, len = this.channel.my.length; i < len; i++) {
                            let channel = this.channel.my[i];
                            if (channel.short_name == this.page.area.short_name) {
                                this.channel.my.splice(i, 1, item);
                                this.page.area = item;
                                this.page.country_short_name = item.short_name;
                                this.updateTabData(this.channel.my);
                                this.$nextTick(() => {
                                    this.$emit('RELOADDATA', 'channelChange');
                                })
                                break;
                            }
                        }
                    }

                    // 点击搜索栏右边定位
                } else {
                    this.channel.my.push(item);
                    this.page.area = item;
                    this.country = item.short_name;
                    this.countryName = item.name;
                    this.initData();
                    this.channel.my = [];
                    this.isheadChange = false;
                }
                this.area.status = false;

            },
            loadmore() {
                if (this.scroll.bottom) return false;
                this.pullType = 'up';
                this.scroll.bottom = true;
                this.loadPageData("", "", "isRefresh").then((num) => {
                    this.$nextTick(() => {
                        this.scroll.bottom = num === 0 ? 'done' : false;
                    });
                });
            },
            getGPS() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(
                        pos => {
                            this.$http
                                .post(
                                    `https://maps.googleapis.com/maps/api/geocode/json?latlng=${
                                    pos.coords.latitude
                                    },${
                                    pos.coords.longitude
                                    }&key=AIzaSyAcIGkvGvmvvGOfW6pVvvLeNyW1f7dh7JY`
                                )
                                .then(response => {
                                    let data = response.data.results;
                                    for (let i = 0; i < data.length; i++) {
                                        if (
                                            data[i].types.indexOf("country") != -1
                                        ) {
                                            this.$emit(
                                                "GPS_DONE",
                                                data[i].formatted_address
                                            );
                                            return;
                                        }
                                    }
                                });
                        },
                        function (err) {
                            window.$zEvent.$emit('ERROR', err);
                        },
                        {
                            enableHighAccuracy: true, // 是否获取高精度结果
                            timeout: 5000, //超时,毫秒
                            maximumAge: 0 //可以接受多少毫秒的缓存位置
                        }
                    );
                }
            },
            changeAreaChange() {
                this.area.status = true;
            }
        }
    };
</script>
<style lang="less">
    .index {
        .ui-header {
            transition: transform .1s linear;
        }
        .search-hide {
            transform: translateY(-82px);
        }

        .ui-list.no-data {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .popup-common {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            z-index: 999;
            border-radius: 10px;
        }


        .model-popup {
            width: 600px;
            .title {
                padding: 0 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 111px;
                border-bottom: 1px solid #eee;
                font-size: 36px;
                color: #282828;
                font-weight: bold;
                text-align: center;
            }
            .model-box {
                padding: 0 40px;
            }
            .model-item {
                position: relative;
                height: 130px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                p {
                    font-size: 32px;
                    color: #666;
                }

                &+.model-item {
                    border-top: 1px solid #eee;
                }
            }

            .model-item.active {
                p {
                    color: #e64a19
                }
                i {
                    display: inline-block;
                }
            }

            .close-btn {
                position: absolute;
                bottom: -100px;
                left: 50%;
                transform: translateX(-50%);
                display: inline-block;
                width: 60px;
                height: 60px;
                background-image: url("../assets/icon-home_close.png");
                background-size: 100% 100%;
            }

        }

    }

    .header-search {
        transition: all .1s linear;
        opacity: 1;
        display: flex;
        align-items: center;
        height: 82px;
        font-size: 28px;
        padding: 0 24px;
        background-color: #fff;

        .logo img {
            margin-left: 6px;
            display: block;
            width: 50px;
            height: 50px;
        }
        .search {
            display: flex;
            align-items: center;
            padding: 0 20px;
            margin: 0 10px 0 30px;
            flex: 1;
            border-radius: 30px;
            background-color: #f6f6f6;
            font-size: 28px;
            color: #c6c6c6;
            height: 60px;

            i {
                margin-right: 12px;
            }
            input {
                background-color: transparent;
                border: none;
                outline: none;
                flex: 1;
                color: #282828;
                font-size: 28px;
                ::-webkit-input-placeholder {
                    color: #c6c6c6;
                }
            }
        }

        .loc {
            display: flex;
            align-items: center;
            color: #5a4640;

            i {
                margin-left: 12px;
            }
        }
    }

    .ui-alert {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 600px;
        height: 330px;
        background: #fff;
        z-index: 999;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        .alert-content {
            text-align: center;
            padding: 30px;
            p {
                margin: 15px auto 35px;
                font-size: 36px;
                font-weight: 500;
                color: #282828;
            }
            span {
                line-height: 1.2;
                font-size: 32px;
                color: #666;
            }
        }
        .alert-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            a {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 81px;
                width: 50%;
                text-align: center;
                font-size: 36px;
                border-top: 1px solid #e2e2e2;
                color: #666;

                &:last-child {
                    color: #e64a19;
                }

                &+a {
                    border-left: 1px solid #e2e2e2;
                }
            }
        }
    }

    .worldcup-section {
        background-color: #fff;
        padding: 24px;
        margin: 14px 0;
        .wc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .tit,
            .link {
                display: flex;
                align-items: center;
            }
            .tit {
                img {
                    display: block;
                    width: 36px;
                    height: 36px;
                    margin-right: 8px;
                }

                color: rgb(63, 65, 70);
                font-size: 24px;
                line-height: 24px;
                font-family: PingFangSC-Medium,
                "Source Han Sans CN",
                sans-serif;
            }
            .link {
                color: rgb(155, 158, 163);
                font-size: 28px;

                span {
                    margin-right: .5em;
                }
            }
        }
        .game-list {
            padding: 30px 0;
            display: flex;
            border-bottom: 1px solid rgb(233, 233, 233);
            a {
                flex: 1;
                flex-basis: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                img {
                    width: 92px;
                    height: 92px;
                }
                p {
                    font-family: PingFangSC-Medium;
                    color: rgb(63, 65, 70);
                    font-size: 24px;
                    height: 48px;
                    line-height: 48px;
                    white-space: nowrap;
                }
            }
        }

        .txt-summarry {
            font-size: 26px;
            line-height: 70px;
            color: rgb(155, 158, 163);
            text-align: center;
            line-height: 70px;
        }
        .ct-schedule-wrap {
            margin-left: -24px;
            margin-right: -24px;
            overflow: hidden;
        }
        .ct-schedule {
            margin-top: 24px;
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            -webkit-user-select: none;
            padding-bottom: 80px;
            margin-bottom: -80px;
            /*隐藏滚动条*/
        }

        .cts-item {
            display: inline-block;
            width: 536px;
            height: 194px;
            margin-left: 24px;
            border: 1px solid rgb(233, 233, 233);
            /*!no*/
            border-radius: 12px;
            &:last-child {
                margin-right: 25px;
            }
        }

        .wc-vs {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 100px;
            .data,
            .team {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100%;
            }

            .data {
                width: 316px;
                .time {
                    color: #000;
                }
                span {
                    color: rgb(213, 43, 54);
                    font-size: 48px;
                }
                p {
                    font-size: 28px;
                    color: rgb(155, 158, 163);
                    margin-top: 16px;
                }
            }
        }
        .team {
            width: 160px;
            img {
                width: 48px;
                height: 48px;
            }
            p {
                margin-top: 16px;
                font-size: 30px;
                line-height: 1;
                color: rgb(51, 51, 51);
            }
        }
    }

    .wc-live-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        width: 80%;
        padding: 0 20px;
        z-index: 9999;
    }

    .gray {
        filter: grayscale(100%);
        filter: gray;
    }
</style>